
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 600px;
            height: 600px;
            border: 1px solid;
            position: relative;
            margin: 0 auto;
        }

        .container div {
            width: 180px;
            height: 180px;
            background: gray;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="container">
        <div style="left: 10px; top: 10px;"></div>
        <div style="left: 33.33%; top: 10px;"></div>
        <div style="left: 66.66%; top: 10px;"></div>

        <div style="left: 10px; top: 33.33%;"></div>
        <div style="left: 33.33%; top: 33.33%;"></div>
        <div style="left: 66.66%; top: 33.33%;"></div>

        <div style="left: 10px; top: 66.66%"></div>
        <div style="left: 33.33%; top: 66.66%"></div>
        <div style="left: 66.66%; top: 66.66%"></div>
    </div>
    <script>
        var colorArr = ["yellow", "blue", "black", "pink", "skyblue", "purple", "orange", "green", "yellowgreen"];
        var containerEle = document.querySelector('.container');
        var divs = document.querySelectorAll(".container div");
        divs.forEach(function (div, key) {
            div.style.backgroundColor = colorArr[key];
            div.onmousedown = function (e) {
                this.style.transition = "none";
                var x = e.clientX - this.offsetLeft;
                var y = e.clientY - this.offsetTop;
                this.style.zIndex = 10;
                var obj = {
                    x: div.offsetLeft,
                    y: div.offsetTop
                }
                var maxAraeEle = null;
                var isCrash = false;
                // console.log(obj);
                this.onmousemove = function (e) {
                    var xx = e.clientX;
                    var yy = e.clientY;
                    var rx = xx - x;
                    var ry = yy - y;
                    console.log(rx);
                    if(rx<0){  // 判断左边的极限距离
                        rx = 0; 
                    }
                    if(ry<0){ // 判断上面的极限距离
                        ry = 0;
                    }
                    // 右边的极限距离
                    if(rx>(containerEle.offsetWidth-this.offsetWidth)){
                        rx = containerEle.offsetWidth-this.offsetWidth;
                    }

                    if(ry>(containerEle.offsetHeight-this.offsetHeight)){
                        ry = containerEle.offsetHeight-this.offsetHeight;
                    }


                    this.style.left = rx + "px";
                    this.style.top =  ry + "px";
                    // 在方块移动的过程中检测碰撞元素；
                    // 检测除了拖动元素之外的其他元素碰撞
                    // console.log(this);
                    var that = this;
                    // 存放碰撞元素；
                    var crashArr = [];

                    divs.forEach(function (item) {
                        if (item !== that) {
                            // 需要检测 this 和  item是否碰撞？
                            console.log(that.offsetLeft)
                            if (
                                Math.abs(that.offsetLeft - item.offsetLeft) <= that.offsetWidth &&
                                Math.abs(that.offsetTop - item.offsetTop) <= that.offsetHeight

                            ) {
                                console.log("有和其他的8个元素碰撞");
                                crashArr.push(item);
                                isCrash = true;
                            }
                        }
                    })
                    console.log(crashArr); // 碰撞的其他元素
                    // 计算 碰撞的面积 获取碰撞面积最大的元素互换位置；
                    var arae = 0;

                    crashArr.forEach(function (crashItem) {
                        var x = crashItem.offsetWidth - Math.abs(crashItem.offsetLeft - that.offsetLeft);
                        var y = crashItem.offsetHeight - Math.abs(crashItem.offsetTop - that.offsetTop);
                        var res = x * y;
                        if (res > arae) {
                            arae = res;
                            maxAraeEle = crashItem;
                        }
                    })
                    console.log("??", maxAraeEle);
                }

                div.onmouseup = function () {
                    console.log(div);
                    div.onmousemove = "";
                    div.style.zIndex = 0;
                    div.style.transition = "all 1s";
                    // div.style.left = obj.x + "px";
                    // div.style.top = obj.y + "px";
                    if (isCrash) {
                        div.style.left = maxAraeEle.style.left;
                        div.style.top = maxAraeEle.style.top;
                        maxAraeEle.style.left = obj.x + "px";
                        maxAraeEle.style.top = obj.y + "px";
                    } else {
                        div.style.left = obj.x + "px";
                        div.style.top = obj.y + "px";
                    }


                }
            }



        })

// 1.给拖拽的方框 限制上下左右的范围；
    </script>
</body>

</html>